<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2 id="txt"></h2>
    <!-- <input type="text" id="age" placeholder="请输入年龄查询" /> -->
    <input type="text" id="user" placeholder="请输入用户名" />
    <input type="text" id="pass" placeholder="请输入密码" />
    <button id="btn">请求数据</button>

    <!-- <ul>
      <li>品种:犬科</li>
      <li>藏獒</li>
      <li>999999</li>
      <li>哈士奇</li>
      <li>99</li>
      <li>猫科</li>
      <li>藏獒</li>
      <li>999999</li>
      <li>哈士奇</li>
      <li>99</li>
    </ul> -->
    <script src="../js/Ajax.js"></script>
    <script>
      // let obj = undefined;
      // JSON.parse: 将json类型的字符串转换成json类型，JSON.stringify：将json类型的内容转换成字符串（必须是严格json类型的数据）
      // document.getElementById("txt").innerHTML = JSON.parse(
      //   JSON.stringify(obj)
      // );
      // 127.0.0.1=localhost
      // let xhr = new XMLHttpRequest();
      // xhr.open("get", "http://192.168.20.57:5500/data/db-array.json", true);
      // xhr.send();
      // xhr.onreadystatechange = function () {
      //   if (xhr.readyState == 4 && xhr.status == 200) {
      // txt类型数据展示
      //     // document.getElementById("txt").innerHTML = xhr.responseText;
      //     console.log(xhr.responseText);
      // json类型数据展示
      //     var _data = JSON.parse(xhr.responseText);
      //     console.log(_data);
      //     console.log(_data.list);
      //     console.log(_data.list[0].mune);
      //     //初始值
      //     // var title = "";
      //     let str = "<ul>";
      //     for (let i = 0; i < _data.list.length; i++) {
      //       str += `<li>品种：${_data.list[i].title}</li>`;
      //       for (let j = 0; j < _data.list[i].mune.length; j++) {
      //         str += `<li>种类名称：${_data.list[i].mune[j].name}</li><li>种类价格：${_data.list[i].mune[j].price}</li>`;
      //       }
      //     }
      //     document.getElementById("txt").innerHTML = `${str}</ul>`;

      //     //遍历渲染
      //     // for (var i = 0; i < _data.list.length; i++) {
      //     //   var str = "";
      //     //   console.log(_data.list[i]);
      //     //   for (var j = 0; j < _data.list[0].mune.length; j++) {
      //     //     str += `
      //     // 				<p>${_data.list[i].mune[j].name}</p>
      //     // 				<p>${_data.list[i].mune[j].price}</p>
      //     // 				`;
      //     //   }
      //     //   title += `
      //     // 			<ul>
      //     // 				<li>
      //     // 					<h2>${_data.list[i].title}:</h2>${str}
      //     // 				</li>
      //     // 			</ul>
      //     // 			`;
      //     // }
      //     // document.getElementById("txt").innerHTML = title;
      //   }
      // };

      // xml类型
      //2、建立与服务器的链接
      // xhr.open("get", "../data/db-xml.xml", true);
      // //3、发送请求
      // xhr.send();
      // //4、响应就绪状态
      // xhr.onreadystatechange = function () {
      //   //5、请求状态
      //   if (xhr.readyState == 4) {
      //     //6、响应状态
      //     if (xhr.status == 200) {
      //       //7、操作数据
      //       var xmlstr = xhr.responseXML;
      //       console.log(xmlstr);
      //       var title = xmlstr.getElementsByTagName("title");
      //       var author = xmlstr.getElementsByTagName("author");
      //       var price = xmlstr.getElementsByTagName("price");
      //       console.log(title, author, price);
      //       for (var i = 0; i < title.length; i++) {
      //         document.getElementById("txt").innerHTML += `
      // 							<ul>
      // 								<li>书名：${title[i].innerHTML}</li>
      // 								<li>作者：${author[i].innerHTML}</li>
      // 								<li>价格：${price[i].innerHTML}</li>
      // 							</ul>
      // 						 `;
      //       }
      //     } else {
      //       alert(xhr.status);
      //     }
      //   }
      // };

      //   function $(str) {
      //     return document.getElementById(str);
      //   }
      //   //绑定点击事件触发
      //   $("btn").onclick = function () {
      //     var url = `../data/db-php.php?user=${$("user").value}&pass=${
      //       $("pass").value
      //     }`;
      //     var xhr = new XMLHttpRequest();
      //     xhr.open("get", url, true);
      //     xhr.send();
      //     xhr.onreadystatechange = function () {
      //       if (xhr.readyState == 4) {
      //         if (xhr.status == 200) {
      //           console.log(xhr.responseText);
      //           alert(xhr.responseText);
      //         } else {
      //           alert(xhr.status);
      //         }
      //       }
      //     };
      //   };
      //

      // Ajax函数封装调用
      // Ajax({
      //   type: "get",
      //   url: "https://mock.mengxuegu.com/mock/67232fbad110d50b7edcf585/zhangzhenzhong",
      //   data: {
      //     a: "111",
      //   },
      //   success: function (data) {
      //     var db = JSON.parse(data);
      //     console.log(db);
      //   },
      //   error: function (e) {
      //     console.log(e);
      //   },
      // });
    </script>
  </body>
</html>
